<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>商品管理</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; background-color: #f5f5f5; }
        .product-container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            border-radius: 4px;
        }
        .action-bar {
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 10px;
        }
        button {
            padding: 8px 15px;
            background: #4285f4;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover { background: #3367d6; }
        .add-btn { background: #28a745; }
        .add-btn:hover { background: #218838; }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        .action-btn {
            padding: 6px 12px;
            margin: 0 3px;
        }
        .edit-btn { background: #ffc107; color: #212529; }
        .edit-btn:hover { background: #e0a800; }
        .delete-btn { background: #dc3545; }
        .delete-btn:hover { background: #c82333; }
        input[type="text"] {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            min-width: 250px;
        }
    </style>
</head>
<body>
<div class="product-container">
    <h2>商品管理</h2>
    <div class="action-bar">
        <input type="text" id="searchProduct" placeholder="搜索商品名称">
        <button class="add-btn" onclick="showAddDialog()">添加商品</button>
    </div>

    <table>
        <thead>
        <tr>
            <th>商品ID</th>
            <th>商品名称</th>
            <th>类别</th>
            <th>价格</th>
            <th>库存</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="productList">
        <tr>
            <td>P1001</td>
            <td>iPhone 13</td>
            <td>Electronics</td>
            <td>6999.00</td>
            <td>50</td>
            <td>正常</td>
            <td>
                <button class="action-btn edit-btn" onclick="showEditDialog('P1001')">编辑</button>
                <button class="action-btn delete-btn" onclick="confirmDelete('P1001', 'iPhone 13')">删除</button>
            </td>
        </tr>
        <tr>
            <td>P1002</td>
            <td>MacBook Pro</td>
            <td>Electronics</td>
            <td>12999.00</td>
            <td>3</td>
            <td class="low-stock">库存不足</td>
            <td>
                <button class="action-btn edit-btn" onclick="showEditDialog('P1002')">编辑</button>
                <button class="action-btn delete-btn" onclick="confirmDelete('P1002', 'MacBook Pro')">删除</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<!-- 添加/编辑商品的对话框 -->
<div id="productDialog" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:white; padding:20px; border-radius:5px; box-shadow:0 0 15px rgba(0,0,0,0.2); z-index:1000; width:400px;">
    <h3 id="dialogTitle">添加商品</h3>
    <form id="productForm">
        <input type="hidden" id="productId">
        <div style="margin-bottom:15px;">
            <label style="display:block; margin-bottom:5px;">商品名称</label>
            <input type="text" id="productName" required style="width:100%; padding:8px; border:1px solid #ddd; border-radius:4px;">
        </div>
        <div style="margin-bottom:15px;">
            <label style="display:block; margin-bottom:5px;">类别</label>
            <select id="productCategory" required style="width:100%; padding:8px; border:1px solid #ddd; border-radius:4px;">
                <option value="">-- 选择类别 --</option>
                <option value="Electronics">电子产品</option>
                <option value="Clothing">服装</option>
                <option value="Food">食品</option>
            </select>
        </div>
        <div style="margin-bottom:15px;">
            <label style="display:block; margin-bottom:5px;">价格</label>
            <input type="number" id="productPrice" min="0" step="0.01" required style="width:100%; padding:8px; border:1px solid #ddd; border-radius:4px;">
        </div>
        <div style="margin-bottom:15px;">
            <label style="display:block; margin-bottom:5px;">预警库存</label>
            <input type="number" id="warningStock" min="0" required style="width:100%; padding:8px; border:1px solid #ddd; border-radius:4px;">
        </div>
        <div style="display:flex; justify-content:flex-end; gap:10px; margin-top:20px;">
            <button type="button" onclick="closeDialog()" style="background:#6c757d;">取消</button>
            <button type="submit" style="background:#28a745;">保存</button>
        </div>
    </form>
</div>

<script>
    function showAddDialog() {
        document.getElementById('dialogTitle').textContent = '添加商品';
        document.getElementById('productForm').reset();
        document.getElementById('productDialog').style.display = 'block';
    }

    function showEditDialog(productId) {
        document.getElementById('dialogTitle').textContent = '编辑商品';
        // 实际项目中这里会从服务器获取商品数据
        document.getElementById('productId').value = productId;
        document.getElementById('productName').value = productId === 'P1001' ? 'iPhone 13' : 'MacBook Pro';
        document.getElementById('productCategory').value = 'Electronics';
        document.getElementById('productPrice').value = productId === 'P1001' ? '6999.00' : '12999.00';
        document.getElementById('warningStock').value = '10';
        document.getElementById('productDialog').style.display = 'block';
    }

    function closeDialog() {
        document.getElementById('productDialog').style.display = 'none';
    }

    function confirmDelete(productId, productName) {
        if(confirm(`确定要删除商品【${productName}】吗？`)) {
            alert(`商品${productName}删除成功！`);
            // 实际项目中这里会发送AJAX请求到后端
        }
    }

    document.getElementById('productForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const isAdd = document.getElementById('dialogTitle').textContent === '添加商品';
        alert(`商品${isAdd ? '添加' : '更新'}成功！`);
        closeDialog();
    });
</script>
</body>
</html>